<template>
    <div class="pagination">
        <button @click='currentPage=currentPage-1' :disabled='currentPage===1'>上一页</button>
        <button v-show='startEnd.start>1' @click='currentPage=1'>1</button>
        <button v-show='startEnd.start>2' disabled>···</button>

        <button  v-for='page in pages' :key='page.num' :class='{active:page.num===currentPage}' 
                @click='currentPage=page.num'
                 >{{page.num}}</button>
        

        <button v-show="startEnd.end<totalPages-1" disabled>···</button>
        <button v-show='startEnd.end<totalPages' @click="currentPage=totalPages">{{totalPages}}</button>
        <button @click='currentPage=currentPage+1' :disabled='currentPage===totalPages'>下一页</button>

        <button style="margin-left: 30px">共{{totalSize}}条</button>
    </div>
</template>

<script>
      /* 总页数： totalPage
      总条数： totalSize
      每页的数量：pageNumber
      当前页数：currentPage
      连续的数量：continuousNum
      连续数量的开始：
      连续数量的结束： */
    //   总条数：totalSize=totalPage*pageNumber
   /*  start=end-continuousNum+1
    end=start+continuousNum-1 */
    

    export default {
        name: "Pagination",
        props:['pageNumber','totalSize','continuousNum','initPage'],
        data(){
            return{
                currentPage:this.initPage,
                
            }
        },
        computed:{
            startEnd(){
                // start不能小于1 end不能大于totalPage
                let start=0;
                let end=0;
                let currentPage=+this.currentPage
                let continuousNum=+this.continuousNum;
                start=currentPage-Math.floor((continuousNum/2));
                if(start<1){
                    start=1
                }
                end=start+continuousNum-1
                if(end>this.totalPages){
                    end=this.totalPages;
                    start=end-continuousNum+1
                    if(start<1){
                        start=1
                    }
                }
                return {
                    start,
                    end
                } 

            },
             totalPages(){
                let totalSize = +this.totalSize;
                let pageNumber = +this.pageNumber;
                return Math.ceil(totalSize/pageNumber)
            
            },
            pages(){
                let totalPage=[];
                let nums=Math.ceil(this.totalSize/this.pageNumber);
                for(let i=1;i<=nums;i++){
                    totalPage.push({num:i})
                }
                // console.log(totalPage);
            //    v-if='page>startEnd.start&&page<startEnd.end'
               let page=totalPage.filter(item=>(
                   (item.num >=this.startEnd.start)&&(item.num<=this.startEnd.end)
               ))
            //    console.log(page);
                return page
            
            },
           
        },
        watch:{
            initPage(page){
                this.currentPage=page
            },
            currentPage(page){
                this.$emit('pageChange',page)
            }
        },
        mounted(){

        }
    }
</script>

<style lang="less" scoped>
    .pagination {
        text-align: center;
        button {
            margin: 0 5px;
            background-color: #f4f4f5;
            color: #606266;
            outline: none;
            border-radius: 2px;
            padding: 0 4px;
            vertical-align: top;
            display: inline-block;
            font-size: 13px;
            min-width: 35.5px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            box-sizing: border-box;
            text-align: center;
            border: 0;

            &[disabled] {
                color: #c0c4cc;
                cursor: not-allowed;
            }

            &.active {
                background-color: #409eff;
                color: #fff;
            }
        }
    }
</style>